<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    input {
        background-color: rgb(232, 219, 232);
        border: 0px;
        /* border-radius: 25%; */
        border-radius: 25px;
        width: 85%;
        padding-left: 10px;
        height: 25px;
    }
    
    .searchbox span {
        font-size: 16px;
        color: cornflowerblue;
        font-weight: 700;
    }
    
    .title {
        margin-top: 10px;
        font-size: 14px;
        margin-left: 5px;
    }
    
    .list span {
        background-color: rgb(234, 229, 229);
        margin-left: 10px;
        margin-top: 10px;
        font-size: 13px;
        padding: 5px;
        display: inline-block;
    }
</style>

<body>
    <div id="app">
        <div class="searchbox">
            <input type="text" placeholder="搜索商家、商品名称" v-model="searchText">
            <!-- search  js语句 -->
            <span v-on:click="search">搜索</span>
        </div>
        <div class="history">
            <div class="title">历史搜索</div>
            <div class="list">
                <span v-for="(item,index) in searchArr">{{item}}</span>
            </div>
        </div>
    </div>
    <script src="vue-2.5.21.js"></script>
    <script src="搜索.js"></script>

</body>

</html>